import { toThousands } from '@/utlis/utlis'
import React, { FC } from 'react'
import styled from "styled-components"
import Count from '../count'
import packageImg from '@/assert/images/customer/package.png'
import { Line } from 'rc-progress'
interface ICount {
    text: string,
    totalNum: string,
    saleNum: string
}

const Bar = styled.div`  
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      border:1px solid #045585;
      width:25.1rem;
      height: 10.8rem; 
        
      .text{
        flex:1 1 30%;
        text-align: center;
        color:#fff;
        font-size: 1.6rem; 
        margin: 1rem;
      }
      .progress-bar{
        position: relative;
        flex:1 1 40%;
        padding-left:2rem; 
        width: 19.4rem;
        height: 14.4rem; 
        flex: 1 1 60%;
        text-align: center;
        margin: 1rem;
      }
      .bar-num{
        position: absolute;
        color: #fff;
        left: 50%;
        top:66%;
        transform: translate(-50%,-50%);
        font-size: 1.6rem;
        font-weight: bold;
        margin: 1rem;
      }
      .rate{ 
        flex:1 1 30%;
        text-align: center;
        color:#00C6FF;
        font-size: 1.4rem;
        font-weight: bold;
      }
    
`

const Content: FC<ICount> = function (props) {

    return (
        <Bar>
            <div className='text'>{props.text}</div>
            <div className='rate'>{props.saleNum}/{props.totalNum}</div>
            <div className='progress-bar'>
                <Line percent={(parseFloat(props.saleNum!) / parseFloat(props.totalNum!)) * 100} strokeWidth={10} trailWidth={10} strokeColor="#19D9FE" trailColor="#045585" />
            </div>
            <div className='bar-num'>{((parseFloat(props.saleNum!) / parseFloat(props.totalNum!)) * 100).toFixed(2) + '%'}</div>


        </Bar>
    )
}

export default Content
